<template>
  <view>
    <pageheader :setting="settingdata"></pageheader>
		<go-top :scrollTop="scrollTop"></go-top>
    <view class="shaixuanbox" :style="'top:'+navH+'px'">
      <view class="onebox" :class="type==0?'oneboxon':''" @click="selectget(0)">全部{{all_num}}</view>
      <view class="onebox" :class="type==1?'oneboxon':''" @click="selectget(1)">有图{{img_num}}</view>
    </view>
    <view class="cometbox" v-for="(item,index) in list" :key="index">
      <view class="cometinfo">
        <image :src="item.avatar" mode="aspectFill"></image>
        <view class="infos">
          <text class="infosname">{{item.nickname}}</text>
          <text class="time">{{item.createtime}}</text>
        </view>
        <u-rate active-color="#FF9F3B" inactive-color="#b2b2b2" :count="item.level" v-model="stars" :disabled="true" gutter="10"></u-rate>
      </view>
      <view class="comet_coment clamp3">{{item.content}}</view>
      <!-- <text class="shopssku">产品规格</text> -->
      <view class="photobox" v-if="item.images.length>0">
        <u-row gutter="12">
          <u-col span="4" v-for="(items,indexs) in item.images" :key="indexs">
            <image :src="items" mode="aspectFill" @click="$plug.showImg(item.images,items)"></image>
          </u-col>
        </u-row>
      </view>
    </view>
	<view class="not_more" v-if="list.length<1">
		<image src="../../static/img/wxiaoxi.png" mode="widthFix"></image>
		<view class="text">暂无评论</view>
	</view>
	<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>

  </view>
</template>

<script>
  import App from '@/App.vue';
var _this, $paginator;
  export default {
    data() {
      return {
        settingdata: {
          name: '全部评价',
          bgColor: '#fff',
          titleColor: '#000000',
          showNav: true,
          showTypes: 0,
          position: "allcomet"
        },
        navH: 0,
        stars: 5,
		list: [],
		nomore: false,
		// 回到头部按钮距离
		scrollTop: 0,
		all_num:0,
		img_num:0,
		type:0,
      }
    },
    onLoad(options) {
		_this = this
		_this.id=options.id
		_this.navH = App.globalData.navHeight
		$paginator = new _this.$paginator(_this.$api)
		_this.getdata(true)
    },
	//监听页面滚动
	onPageScroll(res) {
		this.scrollTop = res.scrollTop
	},
	//下拉刷新
	onPullDownRefresh() {
		$paginator = new _this.$paginator(_this.$api)
		_this.getdata(true)
	},
	onReachBottom: function() {
		$paginator.nextPager(() => {
			_this.getdata()
		})
	},
	methods: {
		selectget(type){
			_this.type=type
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		getdata: function(firstLoad = false) {
			$paginator.getData('morecomment', {goods_id:_this.id,type:(_this.type>0?_this.type:"")}, (data) => {
				if (firstLoad) {
					_this.list = data.list ? data.list : []
				} else {
					_this.list = _this.list.concat(data.list)
				}
				_this.all_num=data.all_num
				_this.img_num=data.img_num
				_this.nomore = data.nomore
			})
		},
	}
  }
</script>

<style lang="scss" scoped>
  .shaixuanbox {
    padding: 17rpx 10rpx;
    background-color: #fff;
    border-top: 10rpx solid #f2f2f2;
    position: sticky;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 99;

    .onebox {
      width: 180rpx;
      height: 58rpx;
      border: 2rpx solid #CCCCCC;
      background-color: #fff;
      text-align: center;
      line-height: 58rpx;
      color: #999999;
      font-size: 28rpx;
      margin-left: 17rpx;
      margin-top: 17rpx;
      border-radius: 28rpx;
    }

    .oneboxon {
      width: 180rpx;
      height: 58rpx;
      background-color: #38BE8C;
      text-align: center;
      line-height: 58rpx;
      color: #ffffff;
      font-size: 28rpx;
      border: none;
    }
  }

  .cometbox {
    margin: 0 25rpx;
    padding: 35rpx 0;
    border-bottom: 2rpx solid #E6E6E6;

    .cometinfo {
      display: flex;
      flex-direction: row;
      align-items: center;

      image {
        width: 78rpx;
        height: 78rpx;
        border-radius: 50%;
      }

      .infos {
        margin-left: 12rpx;
        display: flex;
        flex-direction: column;
        flex: 1;

        .infosname {
          color: #333333;
          font-size: 30rpx;
        }

        .time {
          margin-top: 16rpx;
          color: #999999;
          font-size: 20rpx;
        }
      }
    }

    .comet_coment {
      margin-top: 37rpx;
      color: #333333;
      font-size: 28rpx;
    }

    .shopssku {
      margin-top: 23rpx;
      color: #999999;
      font-size: 20rpx;
    }

    .photobox {
      margin-top: 32rpx;

      image {
        width: 220rpx;
        height: 220rpx;
        border-radius: 5rpx;
      }
    }
  }
</style>
